<template>
  <div id="globalHeader">
    <div class="header-container">
      <div class="header-left">
        <router-link to="/" class="logo-link">
          <div class="logo-wrapper">
            <img class="logo" src="../assets/logo.png" alt="logo" />
          </div>
        </router-link>
      </div>
      
      <div class="header-center">
        <nav class="main-nav">
          <router-link 
            v-for="item in leftMenuItems" 
            :key="item.key"
            :to="item.key"
            class="nav-item"
            :class="{ active: currentRoute === item.key }"
          >
            <component v-if="item.icon" :is="item.icon" class="nav-icon" />
            <span>{{ item.label }}</span>
          </router-link>
        </nav>
      </div>
      
      <div class="header-space-nav">
        <nav class="space-nav">
          <router-link 
            v-for="item in visibleSpaceMenuItems" 
            :key="item.key"
            :to="item.key"
            class="nav-item"
            :class="{ active: currentRoute === item.key }"
          >
            <component v-if="item.icon" :is="item.icon" class="nav-icon" />
            <span>{{ item.label }}</span>
          </router-link>
        </nav>
      </div>
      
      <div class="header-right">
        <div v-if="loginUserStore.loginUser.id" class="user-menu">
          <a-dropdown placement="bottomRight">
            <div class="user-trigger">
              <a-avatar 
                :src="loginUserStore.loginUser.userAvatar" 
                :size="32"
                class="user-avatar"
              />
              <span class="user-name">{{ loginUserStore.loginUser.userName ?? '用户' }}</span>
              <DownOutlined class="user-arrow" />
            </div>
            <template #overlay>
              <a-menu class="user-dropdown-menu">
                <a-menu-item key="mySpace">
                  <router-link to="/my_space" class="menu-link">
                    <UserOutlined />
                    我的空间
                  </router-link>
                </a-menu-item>
                <a-menu-divider />
                <a-menu-item key="logout" @click="doLogout">
                  <LogoutOutlined />
                  退出登录
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </div>
        <div v-else class="guest-actions">
          <a-button type="primary" href="/user/login" class="login-btn">
            登录
          </a-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { computed, h, ref } from 'vue'
import { HomeOutlined, LogoutOutlined, UserOutlined, DownOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import { useRouter, useRoute } from 'vue-router'
import { useLoginUserStore } from '@/stores/useLoginUserStore.ts'
import { userLogoutUsingPost } from '@/api/userController.ts'

const loginUserStore = useLoginUserStore()
const router = useRouter()
const route = useRoute()

// 当前路由
const currentRoute = computed(() => route.path)

// 监听路由变化
router.afterEach((to) => {
  console.log('Route changed to:', to.path)
})

// 左侧菜单项配置
const leftMenuItems = [
  {
    key: '/',
    icon: HomeOutlined,
    label: '首页',
    title: '首页',
  },
  {
    key: '/add_picture',
    label: '上传',
    title: '上传图片',
  },
  {
    key: '/admin/userManage',
    label: '用户',
    title: '用户管理',
    adminOnly: true,
  },
  {
    key: '/admin/pictureManage',
    label: '图片',
    title: '图片管理',
    adminOnly: true,
  },
]

// 右侧空间菜单项配置
const spaceMenuItems = [
  {
    key: '/my_space',
    label: '空间',
    title: '我的空间',
    requireLogin: true,
  },
  {
    key: '/admin/spaceManage',
    label: '空间管理',
    title: '空间管理',
    adminOnly: true,
  },
]

// 外部链接
const externalLink = {
  key: 'codefather',
  href: 'https://www.codefather.cn',
  target: '_blank',
  label: '编程导航'
}

// 根据权限过滤左侧菜单项
const visibleLeftMenuItems = computed(() => {
  return leftMenuItems.filter(item => {
    if (item.adminOnly) {
      const loginUser = loginUserStore.loginUser
      return loginUser && loginUser.userRole === 'admin'
    }
    return true
  })
})

// 根据权限过滤右侧空间菜单项
const visibleSpaceMenuItems = computed(() => {
  return spaceMenuItems.filter(item => {
    if (item.adminOnly) {
      const loginUser = loginUserStore.loginUser
      return loginUser && loginUser.userRole === 'admin'
    }
    if (item.requireLogin) {
      return loginUserStore.loginUser.id
    }
    return true
  })
})

// 用户注销
const doLogout = async () => {
  const res = await userLogoutUsingPost()
  if (res.data.code === 0) {
    loginUserStore.setLoginUser({
      userName: '未登录',
    })
    message.success('退出登录成功')
    await router.push('/user/login')
  } else {
    message.error('退出登录失败，' + res.data.message)
  }
}
</script>

<style scoped>
#globalHeader {
  background: #ffffff;
  border-bottom: 1px solid #f0f0f0;
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  height: 64px;
}

.header-left {
  flex-shrink: 0;
}

.logo-link {
  text-decoration: none;
  display: block;
}

.logo-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo {
  height: 32px;
  width: auto;
}

.site-title {
  font-size: 20px;
  font-weight: 600;
  color: #000000;
  letter-spacing: -0.5px;
}

.header-center {
  flex: 1;
  display: flex;
  justify-content: center;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  color: #666666;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  border-radius: 8px;
  transition: all 0.2s ease;
  position: relative;
}

.nav-item:hover {
  color: #000000;
  background-color: rgba(0, 0, 0, 0.03);
}

.nav-item.active {
  color: #000000;
  background-color: rgba(0, 0, 0, 0.08);
}

.nav-item.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 2px;
  background: #000000;
  border-radius: 1px;
}

.nav-icon {
  font-size: 16px;
}

.external-link {
  color: #999999;
  font-size: 14px;
}

.external-link:hover {
  color: #000000;
}

.header-space-nav {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  padding-right: 24px;
}

.space-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-right {
  flex-shrink: 0;
}

.user-menu {
  position: relative;
}

.user-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid transparent;
}

.user-trigger:hover {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.1);
}

.user-avatar {
  flex-shrink: 0;
}

.user-name {
  font-size: 14px;
  font-weight: 500;
  color: #333333;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-arrow {
  font-size: 12px;
  color: #999999;
  transition: transform 0.2s ease;
}

.user-trigger:hover .user-arrow {
  transform: rotate(180deg);
}

.guest-actions {
  display: flex;
  align-items: center;
}

.login-btn {
  border-radius: 20px;
  font-weight: 500;
  padding: 6px 20px;
}

.user-dropdown-menu {
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border: 1px solid #f0f0f0;
  min-width: 160px;
}

.menu-link {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #333333;
  text-decoration: none;
  padding: 8px 12px;
}

.menu-link:hover {
  color: #000000;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .header-container {
    padding: 0 16px;
    height: 56px;
  }
  
  .site-title {
    display: none;
  }
  
  .main-nav {
    gap: 4px;
  }
  
  .nav-item {
    padding: 6px 12px;
    font-size: 14px;
  }
  
  .nav-item .nav-icon {
    display: none;
  }
  
  .user-name {
    display: none;
  }
  
  .user-trigger {
    padding: 4px 8px;
  }
}

@media (max-width: 480px) {
  .header-center {
    display: none;
  }
  
  .header-container {
    justify-content: space-between;
  }
}
</style>
